CSS @stub：占位符定义 - 全面指南

尽管“CSS @stub”还不是一个标准的 CSS 功能（目前还不是！），但其概念已成为一种管理和组织 CSS 自定义属性（也称为 CSS 变量）的强大模式。您可以将其视为一种占位符定义。此模式并非任何 CSS 规范的正式组成部分，因此本指南将解释其_概念_以及如何使用现有 CSS 功能和预处理器实现类似功能的方法。

为何使用 CSS 自定义属性占位符？

想象一下，您正在构建一个包含众多组件的大型网站。您希望使用自定义属性来确保设计的一致性，并使网站主题的更新变得容易。如果没有一种结构化的方法，您的自定义属性可能会散布在代码库的各个角落，从而难以管理和理解。这正是 CSS @stub 概念发挥作用的地方。

使用占位符定义方法的主要好处包括：

• 代码组织更佳：将自定义属性定义集中在一处，使您的 CSS 更有条理，更易于导航。
• 可维护性增强：在单个“定义”文件中更新自定义属性，更改会自动应用到整个网站。
• 面向未来：随着项目的发展，一个定义良好的自定义属性结构使添加新功能和适应不断变化的设计需求变得更加容易。
• 设计令牌管理：CSS 自定义属性占位符可以作为一个轻量级的系统来管理设计令牌，即基础设计值，如颜色、字体和间距。
• 文档化：一个中央定义为理解每个自定义属性的用途和有效值提供了单一信息源。

实现 CSS @stub 功能（在没有原生功能的情况下）

由于 CSS 目前没有内置的 @stub 或类似关键字，我们需要利用现有的 CSS 功能、预处理器或构建工具来实现预期的效果。以下是一些常用方法：

1. 使用带默认值的 CSS 自定义属性

最简单的方法是为您的自定义属性定义一个默认值。这清楚地表明了该属性的存在及其应持有的值类型，但如果您忘记覆盖它，这并不能阻止您在生产环境中意外使用默认值。这对于开发可能很有用，但对于严格的占位符来说则不太适用。

示例：

            :root {
  --primary-color: #007bff; /* Default blue */
  --secondary-color: #6c757d; /* Default gray */
  --font-size-base: 16px;
}

.button {
  background-color: var(--primary-color);
  color: white;
  font-size: var(--font-size-base);
}

.alert {
  background-color: var(--secondary-color);
  color: white;
}
            

              
                Copy
              
            
          

2. 使用无效/哨兵值的 CSS 自定义属性

一种稍微更稳健的方法是使用一个有意设置的无效值或哨兵值来定义您的自定义属性。如果您忘记覆盖该属性，这将变得显而易见，因为 CSS 很可能会以某种方式失效。这为属性需要被替换提供了更明确的指示。

示例：

            :root {
  --primary-color: undefined;
  --secondary-color: none;
  --font-size-base: 0;
}

.button {
  background-color: var(--primary-color);
  color: white;
  font-size: var(--font-size-base);
}

.alert {
  background-color: var(--secondary-color);
  color: white;
}
            

              
                Copy
              
            
          

在此示例中，使用 `undefined`、`none` 或 `0` 作为初始值很可能会导致渲染问题，从而立即提醒您需要设置该自定义属性。

3. 使用 CSS 预处理器（Sass、Less、Stylus）

CSS 预处理器提供了更复杂的方式来定义和管理变量。您可以使用它们创建仅用作占位符的抽象变量定义。

Sass 示例：

            // _variables.scss
$primary-color: null !default;
$secondary-color: null !default;
$font-size-base: null !default;

// _theme.scss
$primary-color: #007bff; // Override the default value
$secondary-color: #6c757d;
$font-size-base: 16px;

// main.scss
@import 'variables';
@import 'theme';

.button {
  background-color: $primary-color;
  color: white;
  font-size: $font-size-base;
}

.alert {
  background-color: $secondary-color;
  color: white;
}
            

              
                Copy
              
            
          

在这个 Sass 示例中，!default 标志确保只有在变量尚未被定义时才为其赋值。这允许您在一个独立的主题文件中覆盖默认值。

Less 示例：

            // variables.less
@primary-color: ~"null";
@secondary-color: ~"null";
@font-size-base: ~"null";

// theme.less
@primary-color: #007bff;
@secondary-color: #6c757d;
@font-size-base: 16px;

// main.less
@import "variables.less";
@import "theme.less";

.button {
  background-color: @primary-color;
  color: white;
  font-size: @font-size-base;
}

.alert {
  background-color: @secondary-color;
  color: white;
}
            

              
                Copy
              
            
          

在 Less 中使用 `~"null"`（或其他无效值）允许您定义旨在稍后被覆盖的变量。`~` 会对字符串进行转义，防止 Less 将“null”解释为关键字。

4. 使用 CSS 模块和 JavaScript

在使用 CSS 模块的重 JavaScript 项目中，您可以在 JavaScript 文件中定义自定义属性，然后使用 Webpack 或 Parcel 等构建工具将其注入到 CSS 中。

示例：

            // theme.js
export const theme = {
  '--primary-color': '#007bff',
  '--secondary-color': '#6c757d',
  '--font-size-base': '16px',
};

// styles.module.css
:root {
  /* Inject theme variables here */
}

.button {
  background-color: var(--primary-color);
  color: white;
  font-size: var(--font-size-base);
}

.alert {
  background-color: var(--secondary-color);
  color: white;
}
            

              
                Copy
              
            
          

然后，您的构建过程会将 `theme.js` 中的值注入到 `styles.module.css` 中的 `:root` 选择器中。这种方法为您的自定义属性提供了单一信息源，并允许您使用 JavaScript 轻松管理它们。

5. 使用 CSS-in-JS 库

像 Styled Components 或 Emotion 这样的库允许您直接在 JavaScript 代码中定义样式。这为管理自定义属性和主题提供了一种灵活的方式。

示例（Styled Components）：

            // theme.js
export const theme = {
  primaryColor: '#007bff',
  secondaryColor: '#6c757d',
  fontSizeBase: '16px',
};

// components.js
import styled from 'styled-components';
import { theme } from './theme';

const Button = styled.button`
  background-color: ${theme.primaryColor};
  color: white;
  font-size: ${theme.fontSizeBase};
`;

const Alert = styled.div`
  background-color: ${theme.secondaryColor};
  color: white;
`;

            

              
                Copy
              
            
          

Styled Components 允许您直接在组件样式中访问主题变量，从而使主题的管理和更新变得简单。

使用 CSS 自定义属性占位符的最佳实践

无论您选择哪种方法，都应遵循以下一些最佳实践：

• 命名约定：为您的自定义属性使用一致且具有描述性的名称。例如，使用 `--color-primary` 而不是 `--c1`。
• 分类：使用前缀或命名空间将相关的自定义属性分组。例如，对与间距相关的属性使用 `--spacing-small`、`--spacing-medium` 和 `--spacing-large`。
• 文档化：为每个自定义属性编写文档，清楚地描述其用途和有效值。这可以通过在 CSS 中使用注释或在单独的文档文件中完成。
• 一致性：在您为自定义属性使用的值中强制保持一致性。例如，如果您使用 `px` 表示间距，就不要将其与 `em` 或 `rem` 混合使用。
• 语义化值：使用反映值*用途*的语义化名称，而不是值本身。例如，使用 `--header-background-color` 而不是 `--blue-color`，因为如果您的设计发生变化，标题不再是蓝色，您只需要更改变量的*值*，而不需要更改名称。

全局考量与示例

在全局上下文中使用 CSS 自定义属性占位符时，请考虑以下几点：

• 国际化 (i18n)：使用自定义属性来管理不同语言的文本方向（从左到右或从右到左）和字体族。
• 可访问性 (a11y)：使用自定义属性来控制有视觉障碍用户的颜色对比度和字体大小。考虑将它们用于高对比度模式，这通常用于提高易读性。
• 主题化：使用自定义属性为您的网站创建不同的主题，例如浅色和深色模式，或针对特定地区或文化定制的主题。例如，一个同时在欧洲和北美运营的网站可能会使用不同的主色调，以反映每个地区的品牌偏好。
• 货币格式化：虽然您不能直接用 CSS 格式化货币，但可以使用自定义属性来存储货币符号和格式化规则，然后可以在 JavaScript 中使用这些规则来格式化货币值。
• 日期和时间格式化：与货币格式化类似，您可以使用自定义属性来存储日期和时间格式化规则，然后可以在 JavaScript 中根据用户的区域设置来格式化日期和时间。

实际案例

以下是一些关于如何在实际项目中使用 CSS 自定义属性占位符的示例：

• 电子商务网站：使用自定义属性来管理整个网站的配色方案、排版和间距。为不同的促销活动或节日创建不同的主题。
• 新闻网站：使用自定义属性来控制文章的布局和排版。为网站的不同版块（如体育或商业）创建不同的主题。
• Web 应用程序：使用自定义属性来管理用户界面组件，如按钮、表单和表格。为不同的用户角色或组织创建不同的主题。
• 设计系统：使用自定义属性（设计令牌）作为设计系统的基础，确保所有项目和平台的一致性。

CSS 的未来与占位符定义

虽然原生的 @stub 或类似功能尚不存在，但对更好管理自定义属性的需求是明确的。未来版本的 CSS 可能会引入专门的机制来定义占位符自定义属性，或改进现有功能以满足此用例。

结论

尽管“CSS @stub”不是一个真正的 CSS 关键字，但使用占位符定义 CSS 自定义属性的概念是一种宝贵的技术，可以改善代码组织、可维护性，并使您的样式表更具未来适应性。通过利用现有的 CSS 功能、预处理器或构建工具，您可以实现占位符定义方法带来的好处，并创建更健壮、可扩展的 CSS 架构。无论您的项目规模或地点如何，都请拥抱本文中描述的模式，编写更易于维护、可扩展和可主题化的 CSS！